<template>
    <div id="UserList">
        <!-- title -->
        <div class="title">
            <bread-crumb>会员列表</bread-crumb>
            <div class="btn">
                <el-button size="mini" type="success" @click="addBanner">添加会员</el-button>
            </div>
        </div>

        <!-- table -->
        <div class="table">
              <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                prop="addtime"
                label="日期"
                align="center"
                sortable
               >
                </el-table-column>

                

                <el-table-column
                prop="nickname"
                align="center"
                label="昵称">
                    
                </el-table-column>

                <el-table-column
                prop="avatar"
                align="center"
                label="头像">
                    <template slot-scope="scope" >
                        <img :src="scope.row.avatar" class="avatar" alt="头像">
                    </template>
                </el-table-column>

               

                <el-table-column
                prop="phone"
                align="center"
                label="手机号码">
                    
                </el-table-column>

                <el-table-column
                prop="status"
                align="center"
                label="状态">
                    <template slot-scope="scope">
                        <el-button size="mini" :type="scope.row.status | getType "  @click="BannerChangeStatus(scope.row._id)" >
                            {{ scope.row.status | getStatus }}
                        </el-button>
                    </template>
                </el-table-column>


                <el-table-column
                prop="role"
                align="center"
                label="角色">
                    <template slot-scope="scope">
                        <el-button size="mini" :type="scope.row.role | getRoleType "   >
                            {{ scope.row.status | getRole }}
                        </el-button>
                    </template>
                </el-table-column>

                <el-table-column
                prop="status"
                align="center"
                label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary"   @click="EditBanner(scope.row)" >修改</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!--  分页 -->
        <div class="page">
            <el-pagination
            background
            layout="prev, pager, next"
            :current-page="CurrentPage"
            :page-size="PageSize"
            :current-change="onSizeChange"
            :total="total">
            </el-pagination>
        </div>

        <admin-dialog :DialogData="DialogData" :FormData="FormData" @update="getBannerList" ></admin-dialog>

    </div>
</template>

<script>
    import BreadCrumb from "@/components/index/BreadCrumb"
    import AdminDialog from "@/components/dialog/AdminDialog"
    export default {
        components: {
            BreadCrumb,
            AdminDialog
        },
        data() {
            return {
                tableData: [],
                DialogData: {
                    title: "",
                    show: false
                },
                FormData: {},
                total:0,
                CurrentPage: 1,
                PageSize: 10,
                role: "",
            }
        },
        filters: {
            getStatus: function(value) {
                if (value == 1) {
                    return "正常"
                } else if (value == 2) {
                    return "禁用"
                } else if (value == 3) {
                    return "待审核"
                }
            },

            getType: function(value) {
                if (value == 1) {
                    return "success"
                } else if (value == 2) {
                    return "danger"
                } else if (value == 3) {
                    return "info"
                }
            },
            getRole: function ( val ) {
                if (value == 1) {
                    return "普通会员"
                } else if (value == 2) {
                    return "医生"
                } 
            },
            getRoleType: function(value) {
                if (value == 1) {
                    return "success"
                } else if (value == 2) {
                    return "primary"
                } else if (value == 3) {
                    return "info"
                }
            },
        },
        mounted () {
            this.getBannerList(this.role, this.CurrentPage );
        },
        methods: {
            // 获取所有管理员
            async getBannerList( role, pages ) {
                let page = pages ? pages : 1
                let res = await this.$axios.post("/admin/getAllMember", { page, role })
                console.log(res);
                let code = res.data.code 
                if (code == 200) {
                    this.tableData = res.data.data.user
                    this.total = res.data.data.total
                }
            },
            // 改变管理员状态
            async BannerChangeStatus( id ) {
                let res = await this.$axios.post("/admin/AdminStatusChange", { id })
                let code = res.data.code
                if(code == 204) {
                    this.$message.success("更新成功")
                    this.getBannerList()
                } else {
                    this.$message.success("更新失败")
                    this.getBannerList()
                }
            },

            // 添加管理员
            addBanner() {
                this.DialogData = {
                    title: "添加管理员",
                    show: true,
                    add: true,
                    edit: false
                }
                this.FormData = {}
            },

            // 修改管理员

            EditBanner( ban ) {
                console.log(ban.id);
                
                this.DialogData = {
                    title: "修改管理员",
                    show: true,
                    add: false,
                    edit: true
                }
                this.FormData = {
                    id: ban._id,
                    username: ban.username,
                    password: "",
                    checkPass: "",
                    name: ban.name,
                    status: Number(ban.status)
                }
            },

            // 页码变化
            onSizeChange( pages ) {
                let page = pages
                this.getBannerList(this.role, page)
            },
        },
    }
</script>

<style lang="scss" scoped>
 #UserList {
     width: 100%;
     box-sizing: border-box;
     .title {
         width: 100%;
         display: flex;
         align-items: center;
         border-bottom: 1px solid #f5f5f5;
         .btn {
             width: 300px;
         }
     }
     .avatar {
         width: 30px;
         height: 30px;
     }
     .page {
         width: 100%;
         text-align: center;
     }
 }
</style>